<template>
  <div>
  <div class="container">
    <div class="container-head">
      <div class=" container-head_item container-head_left">
        <img src="../assets/icon/head.png" alt="">
      </div>
      <div class="container-head_right">
        <button @click="admin">{{userPhone===''? userPhone='立即登录':userPhone}}</button>
      </div>
    </div>
    <div class="">
      <ul class="container-content_shop container-content_item">
        <li class="shop_item"><img src="../assets/icon/payment-title.png" alt="">
          <p>待付款</p></li>
        <li class="shop_item"><img src="../assets/icon/received-title.png" alt="">
          <p>待收货</p></li>
        <li class="shop_item"><img src="../assets/icon/service-title.png" alt="">
          <p>售后/退换货</p></li>
        <li class="shop_item"><img src="../assets/icon/Order-title.png" alt="">
          <p>所有订单</p></li>
      </ul>
      <ul class="container-content_item">
        <li class="content-li_item">
          <div class="content-li_item_left">
            <img src="../assets/icon/order.png" alt="">
            <span>商城分期订单</span>
          </div>
          <div class="content-li_item_right">
            <span>待还0.0元</span>
            <img src="../assets/icon/right.png" alt="">
          </div>
        </li>
        <li class="content-li_item">
          <div class="content-li_item_left">
            <img src="../assets/icon/card.png" alt="">
            <span>我的银行卡</span>
          </div>
          <div class="content-li_item_right">
            <span></span>
            <img src="../assets/icon/right.png" alt="">
          </div>
        </li>
        <li class="content-li_item"><router-link to="/root/ReceivingAddress">
          <div class="content-li_item_left">
            <img src="../assets/icon/address.png" alt="">
            <span>收货地址</span>
          </div>
          <div class="content-li_item_right">
            <span></span>
            <img src="../assets/icon/right.png" alt="">
          </div>
        </router-link>
        </li>
        <li class="content-li_item">
          <div class="content-li_item_left">
            <img src="../assets/icon/Coupon.png" alt="">
            <span>优惠券</span>
          </div>
          <div class="content-li_item_right">
            <span></span>
            <img src="../assets/icon/right.png" alt="">
          </div>
        </li>
      </ul>
      <ul class="container-content_item">
        <li class="content-li_item">
          <div class="content-li_item_left">
            <img src="../assets/icon/info.png" alt="">
            <span>我要反馈</span>
          </div>
          <div class="content-li_item_right">
            <span></span>
            <img src="../assets/icon/right.png" alt="">
          </div>
        </li>
        <li class="content-li_item">
          <div class="content-li_item_left">
            <img src="../assets/icon/seting.png" alt="">
            <span>设置</span>
          </div>
          <div class="content-li_item_right">
            <span></span>
            <img src="../assets/icon/right.png" alt="">
          </div>
        </li>
        <li class="content-li_item">
          <div class="content-li_item_left">
            <img src="../assets/icon/help.png" alt="">
            <span>帮助中心</span>
          </div>
          <div class="content-li_item_right">
            <span></span>
            <img src="../assets/icon/right.png" alt="">
          </div>
        </li>
      </ul>
    </div>
  </div>
    <foot ref="foot"></foot>
    </div>
</template>

<script>
  import foot from '@pcpt/foot';
  export default {
    name: "personal",
    components:{
      foot
    },
    data(){
      return {
        userPhone:'',
      }
    },
    methods:{
       admin(){
         if(this.userPhone==='立即登录'){
           this.$routes.push('/root/auth/login')
         }else{
            console.log('您已登录');
         }
       }
    },
    mounted(){
      // console.log(localStorage.getItem('userPhone').substring(0,3)+'****'+localStorage.getItem('userPhone').substring(7,localStorage.getItem('userPhone').length));
      this.userPhone=localStorage.getItem('userPhone').replace(/(\d{3})(\d{4})(\d{4})/, "$1****$3");
      this.$refs.foot.index=4;
    },
  }
</script>

<style>
  * {
    margin: 0;
    padding: 0;
    list-style: none;
  }
  .container {
    width: 100vw;
    height: 100vh;
    background: #f6f6f6;
    overflow: hidden;
  }
  .container-head {
    width: 100vw;
    height: 3.6rem;
    line-height: 3.6rem;
    background: url("../assets/icon/background.png");
    background-size: 100%;
  }
  .container-head_left{
    display: inline-block;
    height: 3.6rem;
  }
  .container-head_right{
    display: inline-block;
    height: 3.6rem;
    padding-left: .6666rem;
  }
  .container-head_right button{
    width: 3.76rem;
    height: .96rem;

    background: #196fe3;
    border-radius: .48rem;
    border: none;
    color: #fff;
    outline: none;
    font-size: .42666rem;
    vertical-align: middle;
  }
  .container-head_item img {
    width: 1.6rem;
    height: 1.6rem;
    padding-left: 1.06666rem;
    vertical-align: middle;
  }

  .container-content_item {
    margin-top: .213333rem;
    background: #fff;
    display: inline-block;
    width: 100vw;
  }

  .container-content_shop li {
    float: left;
    width: 25%;
    height: 2rem;
    text-align: center;
    position: center;
  }

  .container-content_shop li p {
    line-height: 1rem;
    color: #666;
    font-size: .37333rem;
  }

  .container-content_shop li img {
    margin-top: .2666rem;
    width: .8rem;
    height: .8rem;
  }

  .content-li_item {
    width: 100vw;
    height: 1.2rem;
    line-height: 1.2rem;
  }
  .content-li_item_left{
    box-sizing: border-box;
    width: 40%;
    display: inline-block;
    float: left;
  }
  .content-li_item_right{
    box-sizing: border-box;
    width:60%;
    display: inline-block;
    float: left;
    text-align: right;
  }
  .content-li_item_right img{
    position: relative;
    width: .5333rem;
    height: .5333rem;
    vertical-align: middle;
    right: .4rem;
    line-height: 1.2rem;
  }
  .content-li_item_right span{
    font-size: .37333rem;
    color: #555;
    vertical-align: middle;
    padding-right: .5rem;
  }
  .content-li_item_left img {
    width: .5333rem;
    height: .5333rem;
    padding-left: .4555rem;
    vertical-align: middle;
  }

  .content-li_item_left span {
    display: inline-block;
    font-size: .37333rem;
    text-indent: .5866rem;
    color: #555;
    vertical-align: middle;
  }
</style>
